<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>时空展现</title>
    <link href="./css/layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="main" style="height:500px;"></div>

    <div id="word">
        <h2>结论：</h2>
        <p>从每个月的降水量和AQI分布上看，东部地区降水量较大，同时东部地区的AQI指数也较低</p>
        <p>从每个月的情况看，降水量较大的地区，AQI指数较低</p>
        <p>空气质量与降水量呈负相关，降水量越大，空气质量越好</p>
    </div>

    <script src="./js/echarts.js"></script>
    <script src="./js/timeConfig.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            timeline:{
                data:[
                    '2014-01','2014-02','2014-03','2014-04','2014-05','2014-06',
                    '2014-07','2014-08','2014-09','2014-10','2014-11','2014-12'
                ],
                label : {
                    formatter : function(s) {
                        return s;
                    }
                },
                autoPlay : false,
                playInterval : 1000,
                y2: -10
            },
            options:[
                {
                    backgroundColor: 'rgba(0,100,0,0)',
                    title : {
                        'text':'1月江苏省降水量/AQI指数',
                        'subtext':'数据来自江苏省统计年鉴'
                    },
                    tooltip : {'trigger':'item'},
                    toolbox : {
                        'show':true, 
                        'feature':{
                            'mark':{'show':false},
                            'dataView':{'show':true,'readOnly':false},
                            'restore':{'show':false},
                            'saveAsImage':{'show':true}
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        x:'240',
                        data:['降水量','AQI'],
                        selectedMode:'single'
                    },
                    dataRange: {
                        min: 0,
                        max : 400,
                        text:['高','低'],  
                        calculable : true,
                        x: 'left',
                        color: ['blue']
                    },
                    series : [
                        {
                            'name':'降水量',
                            'type':'map',
                            'mapType': "江苏",
                            'data': dataMap.data['1'],  
                        },
                        {
                            name: 'AQI',
                            type: 'map',
                            mapType: '江苏',
                            data : dataMap.dataAQI['1']                          
                        }                          
                    ]
                },
                {
                    title : {'text':'2月江苏省降水量/AQI指数'},
                    series : [
                        {'data': dataMap.data['2']},
                        {data : dataMap.dataAQI['2']}
                    ]
                },
                {
                    title : {'text':'3月江苏省降水量/AQI指数'},
                    series : [
                        {'data': dataMap.data['3']},
                        {'data': dataMap.dataAQI['3']}
                    ]
                },
                {
                    title : {'text':'4月江苏省降水量/AQI指数'},
                    series : [
                        {'data': dataMap.data['4']},
                        {'data': dataMap.dataAQI['4']}
                    ]
                },
                {
                    title : {'text':'5月江苏省降水量/AQI指数'},
                    series : [
                        {'data': dataMap.data['5']},
                        {'data': dataMap.dataAQI['5']}
                    ]
                },
                {
                    title : {'text':'6月江苏省降水量/AQI指数'},
                    series : [
                        {'data': dataMap.data['6']},
                        {'data': dataMap.dataAQI['6']}
                    ]
                },
                {
                    title : {'text':'7月江苏省降水量/AQI指数'},
                    series : [
                        {'data': dataMap.data['7']},
                        {'data': dataMap.dataAQI['7']}
                    ]
                },
                {
                    title : {'text':'8月江苏省降水量/AQI指数'},
                    series : [
                        {'data': dataMap.data['8']},
                        {'data': dataMap.dataAQI['8']}
                    ]
                },
                {
                    title : {'text':'9月江苏省降水量/AQI指数'},
                    series : [
                        {'data': dataMap.data['9']},
                        {'data': dataMap.dataAQI['9']}
                    ]
                },
                {
                    title : {'text':'10月江苏省降水量/AQI指数'},
                    series : [
                        {'data': dataMap.data['10']},
                        {'data': dataMap.dataAQI['10']}
                    ]
                },
                {
                    title : {'text':'11月江苏省降水量/AQI指数'},
                    series : [
                        {'data': dataMap.data['11']},
                        {'data': dataMap.dataAQI['11']}
                    ]
                },
                {
                    title : {'text':'12月江苏省降水量/AQI指数'},
                    series : [
                        {'data': dataMap.data['12']},
                        {'data': dataMap.dataAQI['12']}
                    ]
                },

            ]
        };
        myChart.setOption(option);
    </script>
</body>
</html>